<template>
  <el-container>
    <el-header>
      <div class="left-box">
        <span>测试项目</span>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">新建测试用例</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">总览</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title">退出</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-menu"></i>
          <span slot="title">测试BUG一览</span>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              fixed
              prop="id"
              label="序号"
              width="300">
            </el-table-column>
            <el-table-column
              prop="case_item_id"
              label="测试项目标识"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_item_sort_id"
              label="测试项目分类标识"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_design_id"
              label="测试用例标识"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_track"
              label="测试追踪"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_feature"
              label="测试子特性"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_method"
              label="测试方法"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_show"
              label="测试说明"
              width="240">
            </el-table-column>
            <el-table-column
              prop="premise"
              label="前提与约束"
              width="240">
            </el-table-column>
            <el-table-column
              prop="end_condition"
              label="终止条件"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_input"
              label="输入及操作说明"
              width="240">
            </el-table-column>
            <el-table-column
              prop="case_result"
              label="期望测试结果"
              width="240">
            </el-table-column>
            <el-table-column
              prop="rubrics"
              label="评估准则"
              width="240">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="300">
              <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text" size="big">修改</el-button>
                <el-button @click="delete1(scope.row)" type="text" size="big">删除</el-button>
                <el-button @click="export1(scope.row)" type="text" size="big">导出</el-button>
                <el-button @click="implement(scope.row)" type="text" size="big">实施</el-button>
                <el-button @click="check(scope.row)" type="text" size="big">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            page-size="3"
            :total="6"
            @current-change="page">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    export1(row) {
      const _this = this
      axios.get('http://localhost:8088/demo/test/' + row.id).then(function(resp) {
        _this.$message({
          message: '恭喜你，成功导出测试报告',
          type: 'success'
        })
      })
    },
    delete1(row) {
      const _this = this
      axios.delete('http://localhost:8088/case_design/deleteById/' + row.id).then(function(resp) {
        _this.$alert('《' + row.case_design_id + '》删除成功！', '消息', {
          confirmButtonText: '确定',
          callback: action => {
            window.location.reload()
          }
        })
      })
    },
    edit(row) {
      this.$router.push({
        path: '/case_design_update',
        query: {
          id: row.id
        }
      })
    },
    implement() {
      this.$router.push('/case_implement');
      this.breadcrumbItems = ['测试实施']
    },
    check(row) {
      this.$router.push({
        path: '/check',
        query: {
          id: row.id
        }
      })
    },
    handleSelect(key, keyPath) {
      switch (key) {
        case '1':
          this.$router.push('/addcase');
          this.breadcrumbItems = ['新建测试用例']
          break;
        case '2':
          this.$router.push('/main');
          this.breadcrumbItems = ['查看项目']
          break;
        case '3':
          this.$router.push('/login');
          this.breadcrumbItems = ['退出']
          break;
        case '4':
          this.$router.push('/case_bug');
          this.breadcrumbItems = ['测试BUG一览']
          break;
      }
    },
    page(currentPage) {
      const _this = this
      axios.get('http://localhost:8088/case_design/findAll/' + currentPage + '/6').then(function (resp) {
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
      })
    }
  },
  created () {
    const _this = this
    axios.get('http://localhost:8088/case_design/findAll/1/6').then(function (resp) {
      _this.tableData = resp.data.content
      _this.total = resp.data.totalElements
    })
  },
  data() {
    return {
      total: null,
      tableData: null
    }
  }
}
</script>

<style lang="less" scoped>
.el-container{
  height: 100%;
}
.el-header {
  background-color: #42b983;
  display: flex;
  justify-content: space-between;
  //color: #FFFFFF;
  align-items: center;
  font-size: 20px;

  .left_box{
    display: flex;
    align-items: center;
  }
  .right-box{
    display: flex;
    align-items: center;
  }
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
